﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title></title>
    <script type="text/javascript">
        $(function () {
            $("#btnAjax").click(function () {
                // ajax guide
                // url: "service path/ServiceName.asmx/MethodName"
                // data: '{"methodParam1": "value", "methodParam2": "value" ..}' <- make sure use double quote for each param
                //                                                                  and its value
                // contentType: "application/json; charset=utf-8"
                // dataType: "json"
                // then for the success callback,
                // msg contains the serialized json object returned by the service
                // so use var anyName = msg.d to get the js object.
                // if service returns an array it will be
                // var objs = msg.d << objs is an array of objects of type determined by the service i.e. LearningStyle
                // so to access, use for loop or foreach like mine, shown below.
                // then to dereference a property in the object, use the same notation as in c#
                // i.e. objs[i].learningStyleId << exactly the same in c#
                // if ur service returns a primitive value or single object
                // var obj = msg.d << obj contains the value or object
                // for instance service returns Student
                // obj is a student so, obj.firstName << will retrieve the first name in string
                $.ajax({
                    type: "POST",
                    url: "SystemManagementService.asmx/createLearningStyle",
                    data: '{"learningStyleName": "style4", "learningStyleDescription": "some description"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        var objs = msg.d;
//                        var str = "";
//                        for (var i in objs) {
//                            var obj = objs[i];
//                            str += "LearningStyleId: " + obj.learningStyleId + " LearningStyleName: " +
//                                   obj.learningStyleName + " Description: " + obj.learningStyleDescription + "\n";
//                        }

                        alert(objs);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnAjax" name="btnAjax" value="Invoke Service" />
</body>
</html>